<template>
    <div class="home">
        <div class="tabbox">
            <div :class="name==='Com1'?'active':''" @click="handle1">子组件1</div>
            <div :class="name==='Com2'?'active':''" @click="handle2">子组件2</div>
        </div>
        <component :is="name" :num="num"></component>
        <!--<Com1 v-if="name==='Com1'"></Com1>-->
        <!--<Com2 v-if="name==='Com2'"></Com2>-->
    </div>
</template>

<script>
    /**
     * 自定义一个属性
     */
    import  Com1 from '@/components/Com1'
    import  Com2 from '@/components/Com2'
    export default {
        name: 'Home',
        data: function () {
            return {
                name: 'Com1',
                num: 11,
                objData: {
                    a:1
                }
            }
        },
        mounted() {

        },
        methods: {
            handle1(){
                this.name = 'Com1'
            },
            handle2(){
                this.name = 'Com2'
            }
        },
        components:{
            Com1,Com2
        }
    }
</script>
<style lang="scss">
    .home {
        text-align: center;
    }

    .tabbox {
        display: flex;
        justify-content: center;
        background-color: #f3f3f9;
        div {
            display: inline-block;
            width: 200px;
            height: 60px;
            line-height: 60px;
            cursor: pointer;
        }
        .active{
            color: #42b983;
        }
    }
</style>
